<template>
  <div>
    <el-dialog :visible.sync="showPointDialog" :before-close="check" :title="nameNum">
      <el-table
        :data="list"
        border
        style="width:100%"
      >
        <el-table-column label="平台名称">
          <template slot-scope="scope">
            {{ scope.row.platformName }}
          </template>
        </el-table-column>
        <el-table-column label="平台账号">
          <template slot-scope="scope">
            {{ scope.row.userId }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              plain
              @click="watch(scope.row)"
            >查看</el-button>
            <el-button
              type="primary"
              size="mini"
              plain
              @click="cancel(scope.row)"
            >取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <watch-info :dialog-table-visible="dialogTableVisible" :id="id" :platform-id="platformId" @closeDialog="closeDialog" />
  </div>
</template>
<script>
import secret from '@/utils/secret'
import { mapGetters } from 'vuex'
import { getConnectPlat, cancel } from '@/api/search.js'
import WatchInfo from '@/views/liantong/components/watch.vue'
export default {
  name: 'ConnectPlat',
  components: {
    WatchInfo: WatchInfo
  },
  props: {
    pointDialogplat: {
      type: Boolean,
      default: false
    },
    scope: {
      type: Object,
      default: null
    },
    searchRequest: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      nameNum: null,
      showPointDialog: false, // 遮罩
      list: null, // 列表
      dialogTableVisible: false, // 查看详情遮罩
      id: null, // userCenterId
      platformId: '', // 平台id
      searchTerm: null, // 搜索条件
      statusCancel: false // 取消关联判断
    }
  },
  mounetd() {

  },
  computed: {
    ...mapGetters(['assignment', 'token'])
  },
  watch: {
    // 遮罩+关联查询
    pointDialogplat(newVal) {
      this.showPointDialog = newVal
    },
    scope(newVal) {
      this.getConnect(newVal.userCenterId)
      console.log(newVal)
      this.nameNum = '身份标识: ' + newVal.userCenterId
    },
    searchRequest(newVal) {
      this.searchTerm = newVal
    }
  },
  methods: {
    // 父子组件传值
    check() {
      this.showPointDialog = false
      if (this.statusCancel) {
        this.$emit('closePoint', this.searchRequest)
        this.statusCancel = false
      } else {
        this.$emit('closePoint')
      }
    },
    // 父子回调
    closeDialog() {
      this.dialogTableVisible = false
    },
    // 请求列表
    getConnect(userCenterId) {
      const param = {
        // token: this.token,
        userCenterId: userCenterId
      }
      console.log('请求参数')
      console.log(param)
      if (this.pointDialogplat) {
        getConnectPlat(secret.Encrypt(param)).then(response => {
          var data = response.data
          console.log('返回数据')
          console.log(data)
          this.list = data.list
        })
      }
    },
    // 查看
    // 此处调用watch组件
    watch(scope) {
      this.dialogTableVisible = true
      this.id = scope.userId
      this.platformId = scope.platformId
      console.log(this.platformId)
    },
    // 取消关联
    cancel(scope) {
      const param = {
        // token: this.token,
        userCenterId: scope.userCenterId,
        platformId: scope.platformId,
        userId: scope.userId
      }
      console.log('请求参数')
      console.log(param)
      this.$confirm('确定要取消关联吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(response => {
        cancel(secret.Encrypt(param)).then(response => {
          this.$message({
            message: response.resultDesc,
            type: 'success'
          })
          console.log('返回结果')
          console.log(response)
          this.statusCancel = true
          this.getConnect(scope.userCenterId)
        })
      }).catch(response => {
        console.log('取消删除')
      })
    }
  }
}
</script>
<style scoped>

</style>
